<!DOCTYPE html><html><head>
	<meta charset="utf-8">
 <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">	<meta name="description" content="">
	<title>数据标签</title>
	<style>
	#container {
    max-width: 400px; 
    height: 360px; 
    margin: 0 auto;
}
#table-div {
    max-width: 400px;
    margin: 3em auto;
}

	</style>
	<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
	<script src="https://img.hcharts.cn/highmaps/highmaps.js"></script>
	<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
	<script src="https://img.hcharts.cn/highcharts/modules/data.js"></script>
</head>
<body>
<!--
*************************************************************************
    Generated by HCODE at 2017-05-05 15:38:33
    From: https://code.hcharts.cn/highmaps/hhhhvo
*************************************************************************
-->
<!-- 所有地图数据详情见：https://img.hcharts.cn/mapdata/index.html -->
<script src="https://img.hcharts.cn/mapdata/countries/us/custom/us-small.js"></script>
<div id="container"></div>
<div id="table-div">
    <table id="data">
        <tbody><tr>
            <th colspan="3">Unemployment rates per 2014. Source: <a href="http://www.bls.gov/web/laus/laumstrk.htm">BLS</a>.</th>
        
    </tr><tr>
        <th>Rank</th>
        <th>State</th>
        <th>Rate</th>
    </tr>
    <tr>
        <td>1</td>
        <td>NORTH DAKOTA</td>
        <td>2.6</td>
    </tr>
    <tr>
        <td>2</td>
        <td>VERMONT</td>
        <td>3.3</td>
    </tr>
    <tr>
        <td>3</td>
        <td>NEBRASKA</td>
        <td>3.6</td>
    </tr>
    <tr>
        <td>4</td>
        <td>WYOMING</td>
        <td>3.7</td>
    </tr>
    <tr>
        <td>5</td>
        <td>SOUTH DAKOTA</td>
        <td>3.8</td>
    </tr>
    <tr>
        <td>5</td>
        <td>UTAH</td>
        <td>3.8</td>
    </tr>
    <tr>
        <td>7</td>
        <td>IOWA</td>
        <td>4.3</td>
    </tr>
    <tr>
        <td>8</td>
        <td>HAWAII</td>
        <td>4.4</td>
    </tr>
    <tr>
        <td>8</td>
        <td>NEW HAMPSHIRE</td>
        <td>4.4</td>
    </tr>
    <tr>
        <td>10</td>
        <td>LOUISIANA</td>
        <td>4.5</td>
    </tr>
    <tr>
        <td>11</td>
        <td>OKLAHOMA</td>
        <td>4.6</td>
    </tr>
    <tr>
        <td>12</td>
        <td>MINNESOTA</td>
        <td>4.7</td>
    </tr>
    <tr>
        <td>13</td>
        <td>KANSAS</td>
        <td>4.8</td>
    </tr>
    <tr>
        <td>13</td>
        <td>MONTANA</td>
        <td>4.8</td>
    </tr>
    <tr>
        <td>15</td>
        <td>VIRGINIA</td>
        <td>4.9</td>
    </tr>
    <tr>
        <td>16</td>
        <td>IDAHO</td>
        <td>5.0</td>
    </tr>
    <tr>
        <td>17</td>
        <td>TEXAS</td>
        <td>5.2</td>
    </tr>
    <tr>
        <td>18</td>
        <td>SOUTH CAROLINA</td>
        <td>5.3</td>
    </tr>
    <tr>
        <td>19</td>
        <td>MARYLAND</td>
        <td>5.5</td>
    </tr>
    <tr>
        <td>20</td>
        <td>INDIANA</td>
        <td>5.7</td>
    </tr>
    <tr>
        <td>20</td>
        <td>MAINE</td>
        <td>5.7</td>
    </tr>
    <tr>
        <td>20</td>
        <td>OHIO</td>
        <td>5.7</td>
    </tr>
    <tr>
        <td>20</td>
        <td>PENNSYLVANIA</td>
        <td>5.7</td>
    </tr>
    <tr>
        <td>24</td>
        <td>DELAWARE</td>
        <td>5.8</td>
    </tr>
    <tr>
        <td>24</td>
        <td>WISCONSIN</td>
        <td>5.8</td>
    </tr>
    <tr>
        <td>26</td>
        <td>COLORADO</td>
        <td>6.0</td>
    </tr>
    <tr>
        <td>26</td>
        <td>MASSACHUSETTS</td>
        <td>6.0</td>
    </tr>
    <tr>
        <td>26</td>
        <td>WEST VIRGINIA</td>
        <td>6.0</td>
    </tr>
    <tr>
        <td>29</td>
        <td>WASHINGTON</td>
        <td>6.1</td>
    </tr>
    <tr>
        <td>30</td>
        <td>FLORIDA</td>
        <td>6.2</td>
    </tr>
    <tr>
        <td>30</td>
        <td>NORTH CAROLINA</td>
        <td>6.2</td>
    </tr>
    <tr>
        <td>32</td>
        <td>TENNESSEE</td>
        <td>6.3</td>
    </tr>
    <tr>
        <td>33</td>
        <td>ALASKA</td>
        <td>6.4</td>
    </tr>
    <tr>
        <td>34</td>
        <td>ARKANSAS</td>
        <td>6.6</td>
    </tr>
    <tr>
        <td>34</td>
        <td>MISSOURI</td>
        <td>6.6</td>
    </tr>
    <tr>
        <td>36</td>
        <td>NEW YORK</td>
        <td>6.7</td>
    </tr>
    <tr>
        <td>37</td>
        <td>NEW MEXICO</td>
        <td>6.8</td>
    </tr>
    <tr>
        <td>38</td>
        <td>ALABAMA</td>
        <td>6.9</td>
    </tr>
    <tr>
        <td>38</td>
        <td>ARIZONA</td>
        <td>6.9</td>
    </tr>
    <tr>
        <td>38</td>
        <td>CONNECTICUT</td>
        <td>6.9</td>
    </tr>
    <tr>
        <td>38</td>
        <td>NEW JERSEY</td>
        <td>6.9</td>
    </tr>
    <tr>
        <td>38</td>
        <td>OREGON</td>
        <td>6.9</td>
    </tr>
    <tr>
        <td>43</td>
        <td>GEORGIA</td>
        <td>7.0</td>
    </tr>
    <tr>
        <td>44</td>
        <td>MICHIGAN</td>
        <td>7.4</td>
    </tr>
    <tr>
        <td>45</td>
        <td>DISTRICT OF COLUMBIA</td>
        <td>7.5</td>
    </tr>
    <tr>
        <td>45</td>
        <td>MISSISSIPPI</td>
        <td>7.5</td>
    </tr>
    <tr>
        <td>47</td>
        <td>KENTUCKY</td>
        <td>7.7</td>
    </tr>
    <tr>
        <td>48</td>
        <td>CALIFORNIA</td>
        <td>7.8</td>
    </tr>
    <tr>
        <td>49</td>
        <td>ILLINOIS</td>
        <td>7.9</td>
    </tr>
    <tr>
        <td>50</td>
        <td>NEVADA</td>
        <td>8.0</td>
    </tr>
    <tr>
        <td>51</td>
        <td>RHODE ISLAND</td>
        <td>8.3</td>
    </tr>
    </tbody></table>
</div>

	<script>
	$(function () {
    // Load the data from the HTML table and tag it with an upper case name used for joining
    var data = [],
        // Get the map data
        mapData = Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']);
    Highcharts.data({
        table: document.getElementById('data'),
        startColumn: 1,
        startRow: 1,
        complete: function (options) {
            $.each(options.series[0].data, function () {
                data.push({
                    ucName: this[0],
                    value: this[1]
                });
            });
        }
    });
    // Process mapdata
    $.each(mapData, function () {
        var path = this.path,
            copy = { path: path };
        // This point has a square legend to the right
        if (path[1] === 9727) {
            // Identify the box
            Highcharts.seriesTypes.map.prototype.getBox.call(0, [copy]);
            // Place the center of the data label in the center of the point legend box
            this.middleX = ((path[1] + path[4]) / 2 - copy._minX) / (copy._maxX - copy._minX);
            this.middleY = ((path[2] + path[7]) / 2 - copy._minY) / (copy._maxY - copy._minY);
        }
        // Tag it for joining
        this.ucName = this.name.toUpperCase();
    });
    // Initiate the chart
    $('#container').highcharts('Map', {
        title: {
            text: 'US unemployment rate 2014'
        },
        subtitle: {
            text: 'Small US map with data labels'
        },
        mapNavigation: {
            enabled: true,
            enableButtons: false
        },
        xAxis: {
            labels: {
                enabled: false
            }
        },
        colorAxis: {},
        series: [{
            mapData : mapData,
            data: data,
            joinBy: 'ucName',
            name: 'Unemployment rate per 2014',
            states: {
                hover: {
                    color: '#BADA55'
                }
            },
            dataLabels: {
                enabled: true,
                formatter: function () {
                    return this.point.properties['hc-a2'];
                },
                style: {
                    fontSize: '10px'
                }
            },
            tooltip: {
                valueSuffix: '%'
            }
        }, {
            type: 'mapline',
            data: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small'], 'mapline'),
            color: 'silver'
        }]
    });
});
</script>

</body></html>